<template>
  <div>
    <van-nav-bar title="猪猪" left-arrow @click-left="$router.back(-1)" />
    <div class="box">
      <div>
        <van-tabs v-model="active" title-active-color="red">
          <van-tab title="最新">
            <div class="hhh">
              <div class="nr">
                <img src="1.jpg" alt="" />
                <div class="nr2">
                  <div class="nr3">
                    <span>苏振荣</span><br />
                    <span>¥3800</span>
                  </div>
                  <div>
                    <span></span><br />
                    <span style="color: #e8e8e8">达内</span>
                  </div>
                </div>
              </div>
              <div class="nr">
                <img src="1.jpg" alt="" />
                <div class="nr2">
                  <div class="nr3">
                    <span>苏振荣</span><br />
                    <span>¥3800</span>
                  </div>
                  <div>
                    <span></span><br />
                    <span style="color: #e8e8e8">达内</span>
                  </div>
                </div>
              </div>
              <div class="nr">
                <img src="1.jpg" alt="" />
                <div class="nr2">
                  <div class="nr3">
                    <span>苏振荣</span><br />
                    <span>¥3800</span>
                  </div>
                  <div>
                    <span></span><br />
                    <span style="color: #e8e8e8">达内</span>
                  </div>
                </div>
              </div>
              <div class="nr">
                <img src="1.jpg" alt="" />
                <div class="nr2">
                  <div class="nr3">
                    <span>苏振荣</span><br />
                    <span>¥3800</span>
                  </div>
                  <div>
                    <span></span><br />
                    <span style="color: #e8e8e8">达内</span>
                  </div>
                </div>
              </div>
              <div class="nr">
                <img src="1.jpg" alt="" />
                <div class="nr2">
                  <div class="nr3">
                    <span>苏振荣</span><br />
                    <span>¥3800</span>
                  </div>
                  <div>
                    <span></span><br />
                    <span style="color: #e8e8e8">达内</span>
                  </div>
                </div>
              </div>
              <div class="nr">
                <img src="1.jpg" alt="" />
                <div class="nr2">
                  <div class="nr3">
                    <span>苏振荣</span><br />
                    <span>¥3800</span>
                  </div>
                  <div>
                    <span></span><br />
                    <span style="color: #e8e8e8">达内</span>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="茶杯泰迪">茶杯泰迪</van-tab>
          <van-tab title="金毛巡回猎犬">金毛巡回猎犬</van-tab>
          <van-tab title="拉布拉多犬">拉布拉多犬</van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
};
</script>
<style lang="scss" scoped>
.box {
  border-top: 2px solid #e8e8e8;
}
.nr {
  padding: 10px;
  width: 160px;
  position: relative;
}
.nr2 {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
}
.nr img {
  width: 160px;
  height: 160px;
  border-radius: 5px;
}
.nr3 :nth-child(3) {
  color: red;
}

.hhh {
  display: flex;
  flex-wrap: wrap;
}
</style>
